<template>
  <div class="w-100vw flex flex-col flex-center mt-50px mb-20px" v-loading="loading">
    <div class="flex flex-center" @click="toHome">
      <img src="../../assets/logo.png" class="w-2rem" />
      <span class="text-2em ml-0.5rem font-bold">RCEP</span>
    </div>
    <!-- <div class="border p-10px mt-20px"></div> -->
    <el-card class="mt-20px min-w-300px max-w-90vw">
      <div>
        <div class="flex justify-between w-full">
          <span class="text-1.5em font-bold"> 请登录 </span>
          <el-button type="primary" @click="$router.push('/register')">创建您的RCEP账户</el-button>
        </div>
        <el-form
          ref="formRef"
          label-position="top"
          class="mt-20px"
          :rules="rules"
          :model="formData"
        >
          <el-form-item label="邮箱或手机号码" prop="loginAccount">
            <el-input placeholder="请输入邮箱或手机号码" v-model="formData.loginAccount" />
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input
              placeholder="请输入密码"
              v-model="formData.password"
              type="password"
              show-password
            />
          </el-form-item>

          <div class="flex items-center justify-between mb-1em">
            <el-checkbox v-model="isRecord" :label="'记住我'" true-label="1" false-label="0" />
            <div class="flex items-center">
              <el-icon class="mr-4px" size="16"> <QuestionFilled /> </el-icon>
              <span class="text-14px">忘记密码</span>
            </div>
          </div>

          <el-checkbox
            v-model="isAgree"
            :label="'我已阅读并同意网站的使用条件及隐私声明'"
            true-label="1"
            false-label="0"
          />
        </el-form>
        <div class="mt-1em">
          <el-button type="warning" class="w-full !font-bold" @click="login"> 登录 </el-button>
        </div>
        <div class="mt-0.6em">
          <el-button class="w-full !font-bold" @click=""> 返回主页 </el-button>
        </div>
        <el-divider>
          <template #default> 第三方快速登录 </template>
        </el-divider>
        <el-card class="mb-0.5em">
          <div class="flex">
            <div class="logo"></div>
            <span>Google</span>
          </div>
        </el-card>
        <el-card class="mb-0.5em">
          <div class="flex">
            <div class="logo" style="background-position: -18px 0px"></div>
            <span>Facebook</span>
          </div>
        </el-card>
        <el-card class="mb-0.5em">
          <div class="flex">
            <div class="logo" style="background-position: -18px -18px"></div>
            <span>VKontakte</span>
          </div>
        </el-card>
        <el-card class="mb-0.5em">
          <div class="flex">
            <div class="logo" style="background-position: 0px -18px"></div>
            <span>QQ</span>
          </div>
        </el-card>
        <el-card class="mb-0.5em">
          <div class="flex">
            <div class="logo" style="background-position: -36px -18px"></div>
            <span>WeChat</span>
          </div>
        </el-card>
        <el-card class="mb-0.5em">
          <div class="flex">
            <div class="logo" style="background-position: 0px 0px"></div>
            <span>支付宝</span>
          </div>
        </el-card>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, provide } from 'vue'
import { postLogin } from '@/api/member'
import { ElMessage } from 'element-plus'
import { setCookie } from '@/utils/cookie'
import { useRouter } from 'vue-router'
const router = useRouter()
const formRef = ref()
const isRecord = ref(false)
const isAgree = ref(true)
const loading = ref(false)
const formData = reactive({
  loginAccount: null,
  password: null,
})
const rules = {
  loginAccount: [{ required: true, message: '请输入邮箱或手机号码', trigger: 'change' }],
  password: [{ required: true, message: '请输入密码', trigger: 'change' }],
}

const login = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      loading.value = true
      postLogin({
        loginAccount: formData.loginAccount,
        password: formData.password,
      })
        .then(({ code, data }) => {
          if (code === 20000) {
            ElMessage({
              message: '登录成功',
              type: 'success',
              duration: 2000,
            })
            setCookie('token', data.data.access_token, import.meta.env.VITE_DOMAIN_URL, false)
            console.log('token', data.data.access_token, import.meta.env.VITE_DOMAIN_URL, false)
            router.push('/')
          }
        })
        .finally(() => {
          loading.value = false
        })
    } else {
      return false
    }
  })
}

const toHome = () => {
  router.push('/')
}

provide('toHome', toHome)
</script>

<style lang="scss" scoped>
:deep .el-form-item {
  margin-bottom: 1em;
}
:deep .el-form-item__label {
  font-weight: 700;
}
input {
  box-shadow: none;
  border: 1px solid #ccc; /* 可选：自定义边框样式 */
}

.logo {
  margin-right: 12px;
  width: 18px;
  height: 18px;
  overflow: hidden;
  background-image: url('@//assets/image/app-logo.png');
  background-repeat: no-repeat;
  background-position: -36px 0px;
}

// :deep .el-card__body {
//   padding: 0.5em;
// }
</style>
